<template>
	<div class="order" id="order">
        <div class="order_scroll_box" id="wrapper">
            <div class="noMsgTip" v-if="CreatorData.length<=0">暂无订单信息</div>
            <div id="scroller">
                <ul id="thelist">
                    <li class="order_item" v-for="(item,idx) in CreatorData">
                        <div class="info">
                            <p class="name" style="font-weight: bold;"><span>座位号:</span><span>{{ item.tableNo }}</span></p>
                            <p >{{item.addTime | numberToAllDate('')}}</p>
                            <p >备注:{{item.remark ? item.remark : "--"}}</p>
                        </div>
                        <div class="money">
                            <p class="status">
                                <!-- <span>配送完成</span> -->
                            </p>
                            <!-- <p>
                                <span class="finish" @click="sendOk(item)">配送完成</span>
                            </p> -->
                        </div>
                        <div class="items">
                            <div class="item" v-for="it in item.items">
                               <div class="left">
                                    <span class="name">{{ it.productName }}<span v-if="Array.isArray(it.specs) && it.specs.length">({{ it.specs.join(",") }})</span></span>
                                    <span class="code">[{{ it.code }}]</span>
                               </div>
                               <div class="right">
                                <span class="btn gray" v-if="it.makeType=='makeIng'">制作中...</span>
                                <span class="btn" v-if="it.makeType=='deliveryIng'" @click.stop="sendOk(it,'single')">完成</span>
                               </div>
                            </div>
                        </div>
                        <div class="all-ok">
                            <span class="btn" v-if="!item.finished && item.makeType=='deliveryIng'" @click.stop="sendOk(item,'all')">配送完成</span>
                        </div>
                    </li>
                </ul>
                <div id="pullUp" :style="{display:(CreatorData.length>=pageSize?'block':'none')}">
                    <span class="pullUpLabel"></span>
                </div>
            </div>
        </div>
	</div>
</template>

<script type="text/javascript">
export default {
  	data(){
  		return{
            CreatorData:[],
            curStoreId: '',
            curPage: 0,
            pageSize: 10,
            statusFn:{
                'INIT':       "初始单",
                'UNSETTLED':  "未结算",
                'UNFINISHED': "未处理",
                'FINISHED':   "已处理",
                'CANCELED':   "已取消",
                'REFUNDED':   "已退",
                'NOTSURE':    "支付中",
                'FAIL':       "支付失败",
            },
            total: 0,
            totalAmount: 0,
            target: 0, 
            surplus: 0,

  		}
  	},
  	methods:{
        sendOk(item,type){
            let itemIds = [];
            if(type=="all"){
                if(item.items && Array.isArray(item.items)){
                    item.items.forEach(it=>{
                        itemIds.push(it.id);
                    })
                }
            }else{
                itemIds = [item.id];
            }
            this.$http({
                url:"/orders/update/type",
                method:"POST",
                data:{
                    itemIds:[...new Set(itemIds)],
                    makeOrderId:item.masterId,
                    type:"deliveryFinished"
                }
            }).then(res=>{
                this.CreatorData = [];
                this.getOrderList();
            })
        },
  		orderDetail(id){
            return;
  			this.$router.push({path:'/orderDetail/'+id});
  		},
  		getOrderList(){
            let mobile = localStorage.getItem("phone");
          this.$http({
            url:"/orders/myshelf/order",
            method:"POST",
            data:{
                storeId:this.curStoreId,
                mobile,
                // size:this.size,
                // page:this.curPage-1
            }
        }).then((res)=>{
            if(res.data && Array.isArray(res.data)){
                res.data.forEach(it=>{
                    it.masterId = it.id;
                    if(it.items && Array.isArray(it.items)){
                        it.items.forEach(ite=>{
                            ite.masterId = it.id;
                        })
                    }
                })
            }
            this.CreatorData = res.data;
            this.total = res.data.total;
            $(document).ready(()=>{
                let myScroll;
                let pullUpEl;
                let pullUpOffset;
                let generatedCount = 0;
                let that = this;
                let isEnd = false;
                let getDataBtn = true;
                //动画部分
                setTimeout(()=>{
                    pullUpEl = document.getElementById('pullUp');   
                    pullUpOffset = pullUpEl.offsetHeight;
                    myScroll = new iScroll('wrapper', {
                        useTransition: true,
                        topOffset: 0,
                        onRefresh: function () {
                            return;
                            if (pullUpEl.className.match('loading')) {
                                pullUpEl.className = '';
                                pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多';
                                if(isEnd){
                                    pullUpEl.querySelector('.pullUpLabel').innerHTML = '亲，已经到底啦！';
                                }
                            }
                        },
                        onScrollMove: function () {
                            return;
                            if ( that.CreatorData.length < that.pageSize ) {
                                return;
                            }
                            if (this.y < (this.maxScrollY - 20) && !pullUpEl.className.match('flip')) {
                                pullUpEl.className = 'flip';
                                pullUpEl.querySelector('.pullUpLabel').innerHTML = '释放刷新';
                                this.maxScrollY = this.maxScrollY;
                            } else if (this.y > (this.maxScrollY + 20) && pullUpEl.className.match('flip')) {
                                pullUpEl.className = '';
                                pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
                                this.maxScrollY = pullUpOffset;
                            }
                        },
                        onScrollEnd: function () {
                            return;
                            if (pullUpEl.className.match('flip')&&that.CreatorData.length>=that.pageSize) {
                                pullUpEl.className = 'loading';
                                pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中';               
                                pullUpAction(); // Execute custom function (ajax call?)
                            }
                        }
                    });
                    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);//阻止冒泡
                    document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 0); }, false);
                }, 500);

                //上拉加载更多数据
                function pullUpAction () {
                    return;
                    if ( !getDataBtn ) {
                        return;
                    }
                    getDataBtn = false;
                    that.curPage++;
                    that.$http.get('orders/list?storeId='+that.curStoreId+'&page='+that.curPage+'&size='+that.pageSize).then((res)=>{
                        that.CreatorData = that.CreatorData.concat(res.data.orders); // 拼接数组
                        that.total = res.data.total;
                        //数据没有更多了
                        if(res.data.orders.length==0){
                            isEnd = true;
                        }else {
                            isEnd = false;
                        }
                        setTimeout(()=>{
                            myScroll.refresh();
                            getDataBtn = true;
                        },300)
                    }).catch(()=>{
                        getDataBtn = true;
                    })
                }
            });
        })
  		}
  	},
    created: function () {
        this.curStoreId = localStorage.getItem('storeId');
        this.$http.get('/orders/total-amount?storeId='+this.curStoreId).then((res)=>{
            this.totalAmount = res.data.totalAmount.toFixed(2)
            this.target = res.data.target;
        })
    },
  	mounted(){
  		m$.setTitle('配送单列表');
        this.getOrderList();
  	}
}
</script>
<style lang="scss" scoped>
	@import "order";
    .finish{
        display: inline-block;
        padding: 2px 10px;
        background-color: #ff9793;
        color: #fff;
        font-size: .28rem;
        border-radius: 30px;
    }
    .btn.gray{
        background-color: #ccc !important;
        color: #999 !important;
    }
</style>

 